const path = require('path');//模块引用
const htmlWebpackPlugin = require('html-webpack-plugin');//自动生成html文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');//单独提取打包css
const devMode = process.env.NODE_ENV !== 'production';  //判断启动模式

const pathResolve = (targetPath) => path.resolve(__dirname, targetPath);

module.exports = {
  //入口文件
  entry: {
    index: pathResolve('src/js/index.js'),
    main: pathResolve('src/js/main.js'),
  },
  //出口文件
  //注意：在path里所有输出的文件目标路径，必须是绝对路径（这里使用node.js的path模块）
  output: {
    path: pathResolve('dist'),
  },
  module: {
    rules: [{
      test: /\.js$/,
      use: {
        loader: 'eslint-loader',//eslint代码规范
        options: {
          formatter: require('eslint-friendly-formatter'),
        },
      },
      enforce: 'pre',
      include: [pathResolve('src')],
    },
    {
      test: /\.(jsx?)$/,
      use: 'babel-loader',//es6.7转换
      exclude: /node_modules/,
    },
    {
      test: /\.html$/,
      use: {
        loader: 'html-loader',//支持在html引用img
        options: {
          attrs: ['img:src', 'link:href']
        },
      },
    },
    {
      test: /\.(eot|woff|woff2|ttf)$/,
      use: [{
        loader: 'url-loader',//引用文字打包
        options: {
          name: '[name]-[hash:7].[ext]',
          limit: 7189,
          outputPath: 'font',
        },
      },],
    },
    {
      test: /\.less$/,//less预编译
      use: [
        devMode ?
          'style-loader' :
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
            },
          },
        'css-loader',
        'postcss-loader',
        'less-loader',
      ],
    },
    {
      test: /\.(sa|sc|c)ss$/,//sass预编译
      use: [
        devMode ?
          'style-loader' :
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
            },
          },
        'css-loader',
        'postcss-loader',
        'sass-loader',
      ],
    },
    {
      test: /\.(gif|png|jpe?g|svg)$/,//图片打包
      use: [{
        loader: 'url-loader',
        options: {
          limit: 7189,
          name: '[name]-[hash:7].[ext]',
          outputPath: 'img',
        },
      },
      {
        loader: 'image-webpack-loader',//图片压缩
        options: {
          mozjpeg: {
            progressive: true,
            quality: 65
          },
          // optipng.enabled: false will disable optipng
          optipng: {
            enabled: false,
          },
          pngquant: {
            quality: '65-90',
            speed: 4
          },
          gifsicle: {
            interlaced: false,
          },
          // the webp option will enable WEBP
          webp: {
            quality: 75
          }
        }
      },
      ],
    },
    ],
  },
  //配置寻找所对应的文件
  resolve: {
    extensions: ['.js', '.json'],
  },
  //插件
  plugins: [
    new htmlWebpackPlugin({
      //打包压缩
      minify: {
        collapseWhitespace: true,//删除空格
        removeAttributeQuotes: true,//删除引号
        removeComments: true,//删除注释
      },
      filename: pathResolve('dist/index.html'),
      template: pathResolve('src/index.html'),
      chunks: ['manifest', 'index']
    }),
    new htmlWebpackPlugin({
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true,
      },
      filename: pathResolve('dist/main.html'),
      template: pathResolve('src/main.html'),
      chunks: ['manifest', 'main']
    }),
  ],
};